<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>家长端 - 更多功能</title>
  <link rel="stylesheet" href="../css/style.css">
  <style>
    /* 功能卡片样式 */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
    }

    .feature-card {
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      padding: 24px;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      text-decoration: none;
      color: #333;
    }

    .feature-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }

    .feature-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background-color: #e6f4ff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }

    .feature-icon i {
      font-size: 28px;
      color: #007bff;
    }

    .feature-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #007bff;
    }

    .feature-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      .feature-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
<div class="nav">
  <a href="view_letter.html">查看信件</a>
  <a href="chat.html">对话沟通</a>
  <a href="more_features.html">更多功能</a>
  <a href="../index.html">退出登录</a>
</div>

<div class="container">
  <h3>更多功能</h3>

  <div class="feature-grid">
    <a href="grade_query.html" class="feature-card">
      <div class="feature-icon">
        <i class="fa fa-bar-chart"></i>
      </div>
      <div class="feature-title">学生成绩查询</div>
      <div class="feature-desc">查看学生各学期的考试成绩和排名情况，掌握学习进度。</div>
    </a>

    <a href="leave_application.html" class="feature-card">
      <div class="feature-icon">
        <i class="fa fa-calendar-times-o"></i>
      </div>
      <div class="feature-title">请假申请</div>
      <div class="feature-desc">在线提交学生请假申请，实时查看审批状态，便捷高效。</div>
    </a>

    <a href="school_notice.html" class="feature-card">
      <div class="feature-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="feature-title">校园通知</div>
      <div class="feature-desc">获取学校最新通知、活动安排和重要公告，及时了解校园动态。</div>
    </a>
  </div>
</div>
</body>
</html>
